<template>
	<div>
		<!-- 种植方案页面-->
		<div v-show="add">
			<plandList @childerData="getChilderData" v-if="plandList"></plandList>
			<div class="addBut" @click="replace" v-else>去添加种植作物 +</div>
		</div>
		<!-- 去添加种植物表单 -->
		<div v-show="select" class="el-select from_box">
			<el-form class="blo" ref="form" :model="form" style="margin-bottom: -20px" label-width="80px">
				<el-form-item label="作物类型:">
					<!-- 下拉tree :normalizer="normalizer"-->
					<el-tree-select 
						ref="treeSelect"
						v-model="form.plantId" 
						:select-params="selectParams" 
						:tree-params="orgParams"
						:disable-branch-nodes="true"
						@searchFun="_searchFun" 
						@node-click="_nodeClickFun"
						@check="_nodeClickFun" />
				</el-form-item>
				
				<!-- from 表单只写一个 -->
				<!-- <component :is="currentComponent"></component> -->
				<el-card :body-style="{
				  padding: 0,
				  margin: 15,
				  borderRadius: '10px',
				  borderRadius: '14px',
				}" shadow="always">
					<div class="el-form">
					<!-- 作物品种 -->
						<!-- <div class="demo" style="padding-left: 25px"> 
							<el-form-item label="作物品种" class="label">
								<el-select v-model="form.plantId" placeholder="请选择作物种类" style="width: 100%">
									<el-option v-for="item in VarietiesList" :key="item.id"
										:label="item.goodName" :value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</div> -->
						 <!--水稻 熟制 -->
						<div class="demo" style="padding-left: 25px" v-if="typeTwo"> 
							<el-form-item label="熟制" class="label">
								<el-input v-model="form.cooked"></el-input>
							</el-form-item>
						</div> 
						<div class="demo">
							<div class="input">
								<!-- 种植方式 -->
								<el-form-item label="种植方式" class="label" style="width: 100%">
									<el-input v-model="form.mode"></el-input>
								</el-form-item>
							</div>
							<div class="input">
								<!-- 种植密度 -->
								<el-form-item label="播种密度" class="label" style="width: 100%">
									<el-input v-model="form.sowingDensity" size="medium"
										placeholder="请输入5000-21000范围内数值（株/亩)"></el-input>
								</el-form-item>
							</div>
						</div>
						 <!--水稻 移栽密度 -->
						<div class="demo" style="padding-left: 25px" v-if="typeTwo"> 
							<el-form-item label="移栽密度" class="label">
								<el-input v-model="form.transferDensity" size="medium"
										placeholder="请输入5000-21000范围内数值（株/亩)"></el-input>
							</el-form-item>
						</div> 
						<div class="demo">
							<div class="input">
								<!-- 浇灌方式 -->
								<el-form-item label="浇灌方式" class="label" style="width: 100%">
									<el-input v-model="form.irrigationMethod" size="medium"></el-input>
								</el-form-item>
							</div>
							<div class="input">
								<el-form-item label="是否覆膜" class="label" style="width: 100%">
									<el-select v-model="form.isMulching" placeholder="" style="width: 100%">
										<el-option v-for="item in mulchingList" :key="item.plantCode"
											:label="item.plantName" :value="item.plantCode"></el-option>
									</el-select>
								</el-form-item>
							</div>
						</div>
						<div class="demo">
							<div class="input">
								<el-form-item label="播种时间" class="label">
									<el-date-picker 
										v-model="form.sowTime" 
										type="date" 
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期" 
										style="width: 470px">
									</el-date-picker>
								</el-form-item>
							</div>
						</div>
							<!--水稻 移栽时间 -->
						<div class="demo">
							<div class="input" v-if="typeTwo">
								<el-form-item label="移栽时间" class="label">
									<el-date-picker 
										v-model="form.transferTime" 
										type="date" 
										value-format="yyyy-MM-dd HH:mm:ss"
										placeholder="选择日期" 
										style="width: 470px">
									</el-date-picker>
								</el-form-item>
							</div>
						</div>
						<div class="demo1" style="width: 100%">
							<el-form-item label="是否使用复合肥:" class="label">
								<el-select v-model="form.isFertilizer" placeholder="请选择是否使用">
									<el-option v-for="item in whetherUseList" :key="item.plantCode"
										:label="item.plantName" :value="item.plantCode"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="复合肥类型:" class="label" style="margin-left: 15px">
								<el-select v-model="form.UseType" placeholder="请选择复合肥类型:">
									<el-option v-for="item in UseTypeList" :key="item.id" :label="item.goodName"
										:value="item.id"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div style="text-align: center; margin: 20px 0">
						<el-button type="success" @click="preservation" style="width: 15%">保存</el-button>
					</div>
				</el-card>
			</el-form>
		</div>
	</div>
</template>

<script>
	// 添加表单
	// import Cotton from "./cotton";
	// import Corn from "./Corn";
	// import Rice from "./rice";
	import plandList from "./pland-list.vue";
	import {
		addLand,
		fertilizerType,
		CropType
	} from '@/api/farmEvent'
	export default {
		name: "planPage",
		components: {
			// Cotton,
			// Corn,
			// Rice,
			plandList
		},
		data() {
			return {
				plandList: {}, //是否存在种植方案
				add: true,
				select: false,
				plantCode: "",
				typeTwo:false,//水稻种类显示隐藏
				form: {
					ids: [], //地块id 集合
					plantBreed:'',
					plant:'',
					plantId: [], //物类型id 种植品种
					plantName:'',//种植种类
					plantId: "", //作物品种
					isMulching: "0", //是否覆膜
					isFertilizer: "", //是否使用复合肥
					UseType: "", //使用类型
					mode: "", //种植方式
					sowingDensity: "", //播种密度
					irrigationMethod: "", //灌溉方式
					sowTime: "",//播种时间
					// 水稻
					cooked:'',// 熟制
					transferDensity:'',//移栽密度
					transferTime:'',//移栽时间		
					},
				mulchingList: [], //是否覆膜
				// OptionsList: [], // 作物种类
				// VarietiesList: [], // 作物品种
				whetherUseList: [], //是否使用复合肥
				UseTypeList: [], //复合肥类型
				listParames: {},
				// 下拉组织树
				selectParams: {
				multiple: false,
				clearable: true,
				placeholder: '请选择作物类型'
			  },
				// 下拉树
			  orgParams: {
				clickParent: false,
				filteraable: true,
				'check-strictly': true,
				'default-expand-all': false,
				'expand-on-click-node': false,
				data: [],
				props: {
				  children: 'children',
				  label: 'goodName',
				  disabled: 'disabled',
				  value: 'id'
				}
			  },
			};
		},
	   computed: {
		// 所属公司下拉tree只能选择子节点
		  normalizer(node) {
			//去掉children=[]的children属性
			if(node.$children && !node.$children.length) {
			delete node.$children;
			} 
			for (let i = 0; i < node.orgParams.data.length; i++) {
			  const element = node.orgParams.data[i];
			  if(element.children){
				  element.disabled=true
					for (let j = 0; j < element.children.length; j++) {
					  const item=element.children[j]
						if(item.children){
							item.disabled=true
							for (let k = 0; k < item.children.length; k++) {
								  const el=item.children[k]
									if(el.children){
										el.disabled=true
									}
								}
						}
					}
			  }
			}
			return false
		  },
	  },
		mounted() {
			this.$nextTick(()=>{
				this.listParames = JSON.parse(localStorage.getItem("listParames"))
				this.form.ids.push(this.listParames.id);
				this.getTreeData(3);
				this.getfertilizerList();
				this.getAllTypeList();
			})
		},
		methods: {
			// 下拉树
			// 获取下拉树
			async getTreeData(id){
					const response = await CropType(id);
					if (response.data.code == 200) {
						this.orgParams.data = response.data.data
						this.$refs.treeSelect.treeDataUpdateFun(response.data.data); 
					}
			},
		  // 树点击
			_nodeClickFun(data, node, vm) {
				if(data.parentId==6){
					this.typeTwo=true
				}else{
					this.typeTwo=false
				}
				 this.form.plantBreed.splice(0)
				  this.form.plantBreed.push(data.id)
				  // 获取父级种类名册接收id
				  this.form.plantName=data.parentId
				// 获取父级id
				this.plantId=data.parentId
				this.getTreeData(data.id)
			},
			// 树过滤
			_searchFun(value) {
				console.log(value, '<--_searchFun');
				// 自行判断 是走后台查询，还是前端过滤
				// this.$refs.treeSelect.$refs.tree.filter(value);
				this.$refs.treeSelect.filterFun(value);
				// 后台查询
				// this.$refs.treeSelect.treeDataUpdateFun(treeData);
			},
			// 自定义render
			_renderFun(h, { node, data, store }) {
				return (
					<span class='custom-tree-node'>
						<span>{node.label}</span>
					</span>
				);
			},		
			// changeValue(v) {
			// 	// 获取品种value 赋值
			// 	this.form.plantBreedId = v;
			// 	// localStorage.setItem("plantBreedId", this.plantBreedId);
			// 	// if (v == 0) {
			// 	// 	this.currentComponent = Cotton;
			// 	// } else if (v == 1) {
			// 	// 	this.currentComponent = Corn;
			// 	// } else {
			// 	// 	this.currentComponent = Rice;
			// 	// }
			// },
			replace() {
				// 表单
				this.select = true;
				// 列表
				this.add = false;
			},
			//接收子组件的值
			getChilderData(item) {
				this.plandList = item
			},
			getfertilizerList() {
				//获取化肥类型
				fertilizerType({
					// id: this.listParames.id,
					id:13,
					string: "farm_good"
				}).then(res => {
					if (res.data.code == 200) {
						this.UseTypeList = res.data.data
					}
				})

			},
			getAllTypeList() {
				// 作物类型
				// this.OptionsList = [{
				// 		plantName: "棉花",
				// 		plantCode: "0"
				// 	},
				// 	{
				// 		plantName: "玉米",
				// 		plantCode: "1"
				// 	},
				// 	{
				// 		plantName: "水稻",
				// 		plantCode: "2"
				// 	}
				// ];
				// // 作物品种
				// this.VarietiesList = [{
				// 		plantName: "棉花1号",
				// 		plantCode: "0"
				// 	},
				// 	{
				// 		plantName: "棉花2号",
				// 		plantCode: "1"
				// 	},
				// 	{
				// 		plantName: "棉花3号",
				// 		plantCode: "2"
				// 	}
				// ];
				// 是否覆膜
				this.mulchingList = [{
						plantName: "是",
						plantCode: "0"
					},
					{
						plantName: "否",
						plantCode: "1"
					}
				];
				//是否使用复合肥类型
				this.whetherUseList = [{
						plantName: "是",
						plantCode: "0"
					},
					{
						plantName: "否",
						plantCode: "1"
					}
				];

			},
			// 保存
			async preservation() {
				const response = await addLand(this.form);
				console.log(esponse.data)
				if (response.data.code == 200) {
					// 弹出保存成功弹框
					this.$message({
						type: "success",
						message: response.data.msg
					})
					location.reload();
					
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.Center-img {
		text-align: center;
		margin: 20px 0;
	}
.blo{
	width:100%;
}
	.addBut {
		padding: 5px 10px;
		color: #66c999;
		/* border: 1px solid #11c26d; */
		background-color: rgb(212, 245, 208);
		border-radius: 5px;
		width: 180px;
		text-align: center;
		margin: 20px auto;
		cursor: pointer;
	}

	.el-select {
		margin-bottom: 20px;
	}

	/* 表单 */
	.demo {
		padding: 10px;
		display: flex;
		width: 100%;
	}

	/* .demo_{
	  width: 50%;
	} */
	.demo1 {
		padding: 0 10px;
		display: flex;
	}

	.input {
		display: flex;
		margin-left: 15px;
		width: 50%;
	}

	.label {
		width: 50%;
		margin-top: 10px;
	}

	/deep/.el-input--small .el-input__icon {
		height: 20px;
	}
	
	
	.from_box{
		 /* 父级不可选择 */
		.el-tree-node__content {
		  .el-checkbox {
		    display: none !important;
		  }
		}
		 /* 子级可选择 */ 
		 .el-tree-node__children {
		    .el-checkbox {
		      display: inline-block !important;
		    }
		  }
	}

</style>
